<!--
**********************************************************
* @Author: 张小平
* @Date:   2024-05-01
* @Email:  qqshuqian@163.com
* @Last modified: 最后修改日期
* @Description: 文件描述
**********************************************************
-->
<template>
  <div class="item-cell">
    <div class="title">{{ item.label }}</div>
    <div class="set" :class="{abc: numberCondition !== 'between'}">
      <div class="ab">
        <el-select class="size100" v-model="numberCondition" placeholder="请选择区间">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="ab" v-if="numberCondition === 'between'">
        <div class="abc">
          <div class="ab"><el-input-number style="width: 100%" v-model="input2" /></div>
          <div class="ab"><el-input-number style="width: 100%" v-model="input3" /></div>
        </div>
      </div>
      <div class="ab" v-else>
        <el-input-number style="width: 100%" v-model="input1" />
      </div>
    </div>
    <div class="operate">
      <el-button @click="handleDel(item)" type="text" icon="el-icon-delete" />
    </div>
  </div>
</template>

<script>
import { mixinBranch } from '../../mixins'
export default {
  mixins: [mixinBranch],
  data() {
    return {
      numberCondition: '<=',
      options: [{
        value: '<',
        label: '小于'
      }, {
        value: '>',
        label: '大于'
      }, {
        value: '=',
        label: '等于'
      }, {
        value: '<=',
        label: '小于等于'
      }, {
        value: '>=',
        label: '大于等于'
      }, {
        value: 'between',
        label: '介于'
      }],
      input1: '',
      input2: '',
      input3: ''
    }
  },
  computed: {
    vals: function() {
      return this.numberCondition === 'between'
        ? [this.input2, this.input3] : [this.input1]
    }
  },
  watch: {
    vals(val) {
      this.handleSave(val)
    }
  },
  mounted() {
    const {
      conditionValue,
      numberCondition
    } = this.item
    if (numberCondition) {
      this.numberCondition = numberCondition
      if (numberCondition === 'between') {
        this.input2 = conditionValue[0]
        this.input3 = conditionValue[1]
      } else {
        this.input1 = conditionValue[0]
      }
    }
  }
}
</script>

<style scoped>
@import './item.scss';
</style>
